import React, { useEffect, useState } from "react";
import { ListRowState } from "../../types";
import axios from "axios";
import { ListItem } from "../../components";
import { useNavigate } from "react-router-dom";

const Home = () => {
  const [list, setList] = useState<ListRowState[]>([]);
  const navigate = useNavigate();
  const fetchList = async () => {
    try {
      const resp = await axios.get("/api/list");
      setList(resp.data.data);
    } catch {}
  };

  useEffect(() => {
    fetchList();
  }, []);

  return (
    <div>
      <div className="tab-right">
        {list.map((v) => {
          return (
            <ListItem
              key={v.id}
              v={v}
              onClick={() =>
                navigate(`/detail/${v.id}`, {
                  state: v,
                })
              }
            ></ListItem>
          );
        })}
      </div>
    </div>
  );
};

export default Home;
